<template>
	<view>
		<!-- <u-navbar :is-back="true" :is-fixed="true" title="产品详情  "></u-navbar> -->
		<view style=" background-color:#EFEDE9;">
			<view class="pl-2 pr-2 font-14 lineHight-40 font-weight-bold">产品/服务信息</view>
		</view>
		<u-form>
			<u-form-item style="padding-left: 10px; padding-right: 10px;" :border-bottom="false" label-width="230"
				label="产品/服务名称" :disabled="true" input-align="right" :field-style="placeholderStyle">
				<u-input v-model="productServeName" />
			</u-form-item>
			<u-form-item style="padding-left: 10px; padding-right: 10px;" :border-bottom="false" label="服务商名称"
				label-width="230" :disabled="true" input-align="right" :field-style="placeholderStyle">
				<u-input v-model="serviceName" />
			</u-form-item>

			<u-form-item type="textarea" style="padding-left: 10px; padding-right: 10px;" label-width="230"
				:border-bottom="false" label="服务介绍" :disabled="true" input-align="right"
				:field-style="placeholderStyle">
				<u-input type="textarea" height="100" v-model="serviceIntroduction" />
			</u-form-item>
			<view class="text-right text-BEBFE8 pr-2">({{ wordCount }} / {{maxCharacters }})</view>
			<u-form-item  label-width="230" label="服务介绍详情"
				style="padding-left: 10px; padding-right: 10px;">
				<view style=" display: flex; flex-wrap: wrap;">
					<u-image v-for="(img, index) in images" :key="index" :src="getFullImageUrl(img)"
						style="width: 90px; height: 90px; margin: 5px;" @click="previewImage(index)" mode=""></u-image>
				</view>
			</u-form-item>
			<u-form-item style="padding-left: 10px; padding-right: 10px;"  :border-bottom="false"
				:disabled="true" label-width="230" label="服务价格(元)" input-align="right"
				:field-style="placeholderStyle">
				<u-input v-model="servicePrice"/>
				</u-form-item>

			<!-- <u-form-item style="padding-left: 10px; padding-right: 10px;" :border-bottom="false" :disabled="true" label="服务流程" input-align="right" label-width="230"
				:field-style="placeholderStyle">
				<u-input v-model="serviceFlow" />
			</u-form-item>

			<u-form-item style="padding-left: 10px; padding-right: 10px;" :border-bottom="false" :disabled="true" label="服务售后" input-align="right" label-width="230"
				:field-style="placeholderStyle">
				<u-input v-model="serviceInform" />
			</u-form-item> -->

			<view style=" background-color:#EFEDE9;">
				<view class="pl-2 pr-2 font-14 lineHight-40 font-weight-bold">上/下架状态</view>
			</view>
			<u-form-item style="padding-left: 10px; padding-right: 10px;" :border-bottom="false" :disabled="true"
				label-width="230" label="上/下架状态" input-align="right" :field-style="placeholderStyle">
				<u-input v-model="productStatusText" />
			</u-form-item>

			<u-form-item style="padding-left: 10px; padding-right: 10px;" :border-bottom="false" :disabled="true"
				label-width="230" label="添加时间" input-align="right" :field-style="placeholderStyle">
				<u-input v-model="updateTime" />
			</u-form-item>

		</u-form>
	</view>
</template>

<script>
	import {
		getImageUrl
	} from '@/common/free-lib/util.js';
	import $H from "@/common/free-lib/request.js";
	import freeListItem from "@/components/free-ui/free-list-item.vue";
	import ferrButton from "@/components/free-ui/ferr-button.vue";
	export default {
		components: {
			freeListItem,
			ferrButton,
		},
		data() {
			return {
				productServeName: "",
				serviceName: '',
				serviceIntroduction: '',
				servicePrice: '',
				serviceFlow: '',
				serviceInform: '',
				productStatus: '',
				productStatusText: '',
				updateTime: '',
				placeholderStyle: {
					color: '#999'
				},
				images: [],
				form: '',
				maxCharacters: 200,
			}
		},
		computed: {
           wordCount() {
           	// 安全性检查，避免访问未定义的属性
           	if (this.serviceIntroduction && typeof this.serviceIntroduction === 'string') {
           		return this.serviceIntroduction.length;
           	} else {
           		return 0;
           	}
           }	
		},
		onLoad(options) {
			this.getProductInfo(options.id);
		},
		methods: {
			getFullImageUrl(imagePath) {
				return getImageUrl(imagePath);
			},
			previewImage(index) {
				uni.previewImage({
					urls: this.images.map(img => this.getFullImageUrl(img)), 
					current: this.getFullImageUrl(this.images[index]) 
				});
			},
			getProductInfo(id) {
				uni.showLoading({
					title: '加载中'
				});
				$H.get(
					"/upper/upperMarketProduct/queryById", {
						id,
					}, {}
				).then((res) => {
					if (!res.result) {
						uni.showToast({
							title: "未查询到相关信息",
							icon: "none",
						});
						return;
					}
					this.productServeName = res.result.productServeName;
					this.serviceName = res.result.serviceName;
					this.serviceIntroduction = res.result.serviceIntroduction;
					this.servicePrice = res.result.servicePrice;
					this.serviceFlow = res.result.serviceFlow;
					this.serviceInform = res.result.serviceInform;
					this.productStatus = res.result.productStatus;
					this.productStatusText = res.result.productStatus == 1 ? '已上架' : '已下架';
					this.updateTime = res.result.updateTime;
					if (res.result.serviceIntroductionUrl) {
						this.images = res.result.serviceIntroductionUrl.split(',');
					} else {
						this.images = [];
					}

					uni.hideLoading();
				}).catch(error => {
					console.error('请求出错', error); // 处理任何错误
					uni.showToast({
						title: "查询错误",
						icon: "none",
					});
					uni.hideLoading();
				})

			},

		}
	}
</script>

<style scoped>

</style>